<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则   查找函数</title>
<link rel="stylesheet" href="css/base.css" />
<style>
	.reg-h2{font-size: 20px; font-weight: bold}
	.sea-main{border: 1px solid #888; padding: 20px; margin-top: 40px;}
	.sea-main h3{font-size: 20px; padding-bottom: 20px; border-bottom: 1px dashed #ccc;}
	.sdes{line-height: 30px; margin-top: 10px; padding-bottom: 20px; border-bottom: 1px dashed #ccc;}
	.stext{margin-top:20px; padding: 20px 0;}
	.seainput-wrap{margin-top: 20px;}
	.seainput-wrap .seainput{height: 26px; padding: 5px 10px; border-radius: 5px; border: 1px solid #119de8; margin-right: 5px;}
	.sea-other{color: #ff6f18; margin-top: 10px; font-weight: bold;}
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">正则   查找函数</h2>
	<div class="wrap-main">
		<h2 class="reg-h2">字符创：abcdefg</h2>
		
		<div class="sea-main">
			<h3>search 函数：</h3>
			<p class="sea-other">search() 可以匹配字符和正则表达式，例如，找出a-g的英文字符：search([a-g])</p>
			<div class="sdes">
				如：输入bcd，有，则返回 1 结果，从b开始算起始位置;<br>
				如：输入www, 无，则返回 -1 结果;
			</div>
			<div class="seainput-wrap">
				<input type="text" class="seainput" id="seainput">
				<input type="button" id="seabtn" value="匹配">
			</div>
			<p class="stext" id="seatext1"></p>
		</div>
		
		<div class="sea-main">
			<h3>match 方法：</h3>
			<div class="sdes">
				如：bcd，有，则返回 bcd 结果；<br>
				如：www, 无，则返回 null 结果;
			</div>
			<div class="seainput-wrap">
				<input type="text" class="seainput" id="matchinput">
				<input type="button" id="matchbtn" value="匹配">
			</div>
			<p class="stext" id="matchtext"></p>
		</div>
		
		<div class="sea-main">
			<h3>indexOf 方法：(用法和search类似，返回结果一样)</h3>
			<div class="sdes">
				如：bcd，有，则返回 bcd 结果；<br>
				如：www, 无，则返回 -1 结果;
			</div>
			<div class="seainput-wrap">
				<input type="text" class="seainput" id="indexinput">
				<input type="button" id="indexbtn" value="匹配">
			</div>
			<p class="stext" id="indextext"></p>
		</div>
		
	</div>
</div>
<script>
	window.onload = function ()
	{
		var str = "abcdefg";
		var oDiv1 = document.getElementById("seatext1");
		var oDiv2 = document.getElementById("matchtext");
		var oDiv3 = document.getElementById("indextext");
		var oInp1 = document.getElementById("seainput");
		var oBtn1 = document.getElementById("seabtn");
		var oInp2 = document.getElementById("matchinput");
		var oBtn2 = document.getElementById("matchbtn");
		var oInp3 = document.getElementById("indexinput");
		var oBtn3 = document.getElementById("indexbtn");
		
		oBtn1.onclick = function()
		{
			if( oInp1.value == "" )
			{
				oDiv1.innerHTML = "不能为空！"
			}
			else if( str.search(oInp1.value) == -1 )
			{
				oDiv1.innerHTML = "没有匹配到字符串 ‘" + oInp1.value + "’ ，返回的结果是：" + str.search(oInp1.value);
			}
			else{
				oDiv1.innerHTML = "找到了字符串 ‘" + oInp1.value + "’ ，返回的结果是：" + str.search(oInp1.value);
			}
		}
		
		oBtn2.onclick = function()
		{
			if( oInp2.value == "" )
			{
				oDiv2.innerHTML = "不能为空！"
			}
			else if( str.match(oInp2.value) == null )
			{
				oDiv2.innerHTML = "没有匹配到字符串 ‘" + oInp2.value + "’ ，返回的结果是：" + str.match(oInp2.value);
			}
			else{
				oDiv2.innerHTML = "找到了字符串 ‘" + oInp2.value + "’ ，返回的结果是：" + str.match(oInp2.value);
			}
		}
		
		oBtn3.onclick = function()
		{
			if( oInp3.value == "" )
			{
				oDiv3.innerHTML = "不能为空！"
			}
			else if( str.indexOf(oInp3.value) == -1 )
			{
				oDiv3.innerHTML = "没有匹配到字符串 ‘" + oInp3.value + "’ ，返回的结果是：" + str.indexOf(oInp3.value);
			}
			else{
				oDiv3.innerHTML = "找到了字符串 ‘" + oInp3.value + "’ ，返回的结果是：" + str.indexOf(oInp3.value);
			}
		}
		
	}
</script>
</body>
</html>
